{% extends 'base.html' %}
{% load static %}
{% block content %}
  <div class="container p-2 mb-1" style="background-image: url({% static 'image/WhatsApp Image 2026-04-13 at 16.22.23.jpeg' %}); background-size: cover; background-position: center; border-radius: 15px;">
    <div class="hero bg-primary text-white text-center py-5 rounded-4 mb-5">
      <h1 class="display-4">Welcome to BanshiX</h1>
      <div class="lead-container">
    <p class="lead preview">
        BanshiX is a global online store specializing in electronics, vehicles, and home appliances, offering high-quality products delivered worldwide.
    </p>
     <button class="btn btn-sm btn-light mt-2"
                onclick="this.parentElement.classList.toggle('open')">
                Read More
            </button>
    <div class="lead full">
        <p>
            From smartphones and smart home devices to cars, trucks, and essential household appliances, BanshiX provides everything you need in one trusted platform delivered straight to your doorstep wherever you are.
        </p>

        <p>
            With a wide range of products across multiple categories, you can shop with confidence knowing you’re getting quality, reliability, and value.
        </p>

        <p>
            We offer a best price guarantee if you find a lower price elsewhere, we will refund 100% of the difference. You can also enjoy flexible installment payment options, making it easier to get what you need without paying everything upfront.
        </p>

        <p>
            BanshiX smarter shopping, delivered worldwide.
        </p>
    </div>
</div>
      
      <a href="{% url 'shop:product_list' %}" class="btn btn-light btn-lg">Start Shopping</a>
    </div>
    <div class="bg-light ps-3 rounded-1">
          <h2 class="">Featured Products</h2>
    </div>
    <div class="row">
      {% for product in featured %}
        <div class="col-md-2 mb-4">
          <div class="card product-card h-100">
            <div class="position-relative">
              <img src="{{ product.image.url }}" class="card-img-top" alt="{{ product.name }}" style="height:100px; object-fit:cover;" />
              
              <!-- Discount Badge -->
              {% with discount=product.get_active_discount %}
                {% if discount %}
                  <div class="discount-badge-small">
                    {% if discount.discount_type == 'percentage' %}
                      {{ discount.discount_value }}% OFF
                    {% else %}
                      {{ currency_symbol }}{{ discount.discount_value }} OFF
                    {% endif %}
                  </div>
                {% endif %}
              {% endwith %}
            </div>
            
            <div class="card-body">
              <h6 class="card-title">{{ product.name }}</h6>
              
              <!-- Price with Discount -->
              {% with discount=product.get_active_discount %}
                {% if discount %}
                  <div class="pricing mb-2">
                    <span class="original-price-small text-muted text-decoration-line-through">
                      {{ currency_symbol }}{{ product.price|floatformat:2 }}
                    </span>
                    <span class="discounted-price-small text-success fw-bold">
                      {{ currency_symbol }}{{ product.get_discounted_price|floatformat:2 }}
                    </span>
                  </div>
                {% else %}
                  <p class="text-success fw-bold mb-2">
                    <span class="product-price" data-price="{{ product.price }}">
                      {{ currency_symbol }}{{ product.price|floatformat:2 }}
                    </span>
                  </p>
                {% endif %}
              {% endwith %}
              
              <a href="{% url 'shop:product_detail' product.slug %}" class="btn btn-primary w-100">View Details</a>
             
              <button
                  hx-post="{% url 'shop:add_to_cart' product.id %}"
                  hx-target="#cart-count"
                  hx-swap="outerHTML"
                  hx-indicator="#loading-spinner"
                  class="btn btn-success w-100 mt-2">
                  <i class="fas fa-cart-plus"></i> Add to Cart
              </button>

              <div id="loading-spinner" class="htmx-indicator">
                <small>Adding...</small>
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>

  <div class="lead-container" onclick="this.classList.toggle('open')">

    
    {% block extrastyle %}
      <style>
        .lead-container {
    position: relative;
    cursor: pointer;
}

/* preview always visible */
.lead.preview {
    margin-bottom: 0;
}

/* hidden content */
.lead.full {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
}

/* desktop hover */
@media (hover: hover) {
    .lead-container:hover .lead.full {
        max-height: 400px;
        opacity: 1;
        margin-top: 10px;
        overflow-y: auto;
        overflow-x: auto;
    }
}

/* mobile / touch toggle */
.lead-container.open .lead.full {
    max-height: 60vh; /* responsive height */
    opacity: 1;
    margin-top: 10px;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}

/* improve scrolling appearance */
.lead.full {
    scrollbar-width: thin;
}


      </style>
    {% endblock extrastyle %}
      
{% endblock %}